<template>
  <div class="app-container">
    <el-dialog :title="this.title" :visible="modifyManagerVisible" @close="cancel" width="600px"
         :close-on-click-modal="false" :close-on-press-escape="false"
          append-to-body>
          <el-form ref="form" :model="form" label-width="120px" :rules="rules">
            <el-form-item label="当前项目经理">
              {{ form.projectManagerName }} 
            </el-form-item>
            <el-form-item label="变更后项目经理">
              <el-select v-model="form.userId" filterable clearable  style="width: 100%;" @change="handleChange">
                <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" />
              </el-select> 
            </el-form-item>
            <el-form-item label="变更说明" prop="remark">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </el-form> 
          <span slot="footer" class="dialog-footer" > 
            <el-button  @click="cancel">取 消</el-button>
            <el-button type="primary" v-hasPermi="['projectManage:list:update']"  @click="onSure('form')">提 交</el-button>
          </span>
        
    </el-dialog>
     
    
  </div>
</template>

<script>
  import {modifyProjectTime}  from "@/api/projectManage/projectList";
  import {getUsersByRolekey} from "@/api/system/user";
  
  export default {
  name: "ProjectTemplete",
  dicts: ['owner_position'],
  data() {
      return {
        loading:false,
        modifyManagerVisible:false,
        userList:[],
        title:'',
        form:{ 
          remark:null
        },
        isUpdate:false, 
        rules:{
          remark: [
            { required: true, message: "变更说明不能为空", trigger: "blur" }
          ],
          userId:[
            { required: true, message: "变更后项目经理不能为空", trigger: "blur" }
          ]  
        }
      }
  },
  created() {
     
  },

  methods: {

    //变更后的项目经理
    handleChange(value){
      this.form.modifyProjectManagerId = value;
      let obj = this.userList.find(item => item.userId === value);
      this.form.modifyProjectManagerName =obj.nickName; 
    },
 
    //提交模板
    onSure(formName){

      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$modal.loading("请稍候...");
            //新增流程
            this.form.projectListId = this.form.id;
            this.form.type = 20;
            modifyProjectTime(this.form).then(response=>{
                this.$modal.closeLoading();
                this.cancel();
            }).catch(()=>{
              this.$modal.closeLoading();
            }) 
          }
      })

    },


    //加载详情
    getProjectManagerList(){
      getUsersByRolekey(this.$store.state.globalParam.PM).then(result => { 
          this.userList = result.data;
      })  
    },

     //初始化
     open(title,row){
      this.modifyManagerVisible = true;
      this.title = title;
      this.form = row;
      this.form.remark=null;
      this.getProjectManagerList(); 
     }, 




     // 取消按钮
     cancel() {
        this.modifyManagerVisible = false; 
        this.form = {remark:null};  
     }
  }
};
</script>
<style>
  .date_picker{
    width: 150px !important;
  }

  
/* 覆盖鼠标悬停时的背景色 */
.el-table .el-table__body-wrapper tbody tr:hover > td {
  background-color: transparent !important; /* 设置为透明 */
  /* 或者设置为特定的颜色，例如 */
  /* background-color: #fafafa !important; */
}

 /*去掉表格单元格边框*/
 .customer-no-border-table th{
  border:none  !important;
}
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none  !important;
}
/*表格最外边框*/
.customer-no-border-table .el-table--border, .el-table--group{
  border: none  !important;
}
/*头部边框*/
.customer-no-border-table thead tr th.is-leaf{
  border: 0px solid #EBEEF5;
  border-right: none;
}
.customer-no-border-table thead tr th:nth-last-of-type(2){
border-right: 0px solid #EBEEF5;
}
/*表格最外层边框-底部边框*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
  width: 0;
}
.customer-no-border-table::before{
width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
width: 0;
}
.customer-no-border-table .el-table__header tr th{
background: #fff;
color: #333333 ;
padding: 3px ;
fontWeight: 550 ;
height: 36px ;
border: 0px;
font-size: 15px;
}

</style>
 
 
